<template>
  <div class="color-picker">
    <el-input v-model="colorValue" placeholder="请选择颜色值" readonly>
      <template #prepend>
        <el-color-picker v-model="colorValue" :disabled="readonly" :predefine="predefineColors" color-format="hex"/>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>

import { computed, ref } from 'vue';

defineOptions({name: 'color-picker'});

const props = defineProps({
  modelValue: String,
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);
const colorValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val);
    emit('change', val);
  },
});

const predefineColors = ref([
  '#409EFF', // 默认颜色
  '#1A53FF', // 默认颜色
  '#FF0000', // (红色)
  '#FF0000', // (红色)
  '#FFA500', // (橙色)
  '#FFFF00', // (黄色)
  '#008000', // (绿色)
  '#00FFFF', // (青色)
  '#0000FF', // (蓝色)
  '#800080', // (紫色)
  '#FFC0CB', // (粉红色)
  '#FFD700', // (金色)
  '#A52A2A', // (棕色)
  '#800000', // (栗色)
  '#808000', // (橄榄色)
  '#000000', // (黑色)
  '#FFFFFF', // (白色)
  '#808080', // (灰色)
  '#C0C0C0', // (银色)
  '#F0E68C', // (卡其色)
  '#00FF00', // (荧光绿)
  '#00FF7F', // (浅绿)
  '#8A2BE2', // (紫罗兰色)
]);

</script>

<style lang="scss" rel="stylesheet/scss">
.color-picker {
  .el-color-picker__trigger {
    vertical-align: middle;
  }

  .el-input-group--prepend > .el-input__wrapper {
    border-top-left-radius: var(--el-input-border-radius, var(--el-border-radius-base)) !important;
    border-bottom-left-radius: var(--el-input-border-radius, var(--el-border-radius-base)) !important;
  }

  .el-input-group__prepend {
    background-color: initial !important;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: initial;
    border-radius: 4px;
    padding: initial;
    white-space: nowrap;
    box-shadow: initial !important;
    margin-right: 3px;
  }
}
</style>
